<template>
    <div class="formStyle" :ref="formobj.id">
        <el-form 
            :ref="'form_'+formobj.id" 
            :inline="formobj.inline?formobj.inline:true"
            class="demo-form-inline" 
            :size="formobj.size?formobj.size:'mini'" 
            :label-position="formobj.labelPosition?formobj.labelPosition:'right'"
            :label-width="formobj.labelWidth?formobj.labelWidth+'px':'100px'"
            :model="formItem">
            <el-col>
                <el-form-item 
                    v-for='item in formobj.formBtnArr' 
                    :key='item.key' 
                    :label="item.title" 
                    :tag="item.type"
                    :style="{
                        width:formobj.col?100/formobj.col+'%':'25%',
                        display:'inline-block',
                    }"
                >
                   <el-col :span='24'>
                        <!-- 日期选择框 -->
                        <el-date-picker
                            v-if="item.type=='dateRange'"
                            v-model="formItem[item.key]"
                            type="daterange"
                            range-separator="~"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :format="item.format?item.format:'yyyy-MM-dd'"
                            :value-format="item.format?item.format:'yyyy-MM-dd'"
                            :picker-options="item.pickerOptions"
                            :clearable="item.clearable?item.clearable:false"
                        >
                        </el-date-picker>

                        <!-- 日期时间选择框 -->
                        <el-date-picker
                            v-if="item.type=='dateTimeRange'"
                            v-model="formItem[item.key]"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :format="item.format?item.format:'yyyy-MM-dd hh:mm:ss'"
                            :value-format="item.format?item.format:'yyyy-MM-dd hh:mm:ss'"
                            :picker-options="item.pickerOptions"
                            :clearable="item.clearable?item.clearable:false"
                        >
                        </el-date-picker>

                        <!-- 普通input输入框 -->
                        <el-input 
                            v-if="item.type=='inputComp'"
                            v-model="formItem[item.key]" 
                            :placeholder="item.placeholder?item.placeholder:'请输入'"
                            :clearable="item.clearable?item.clearable:false"
                            :disabled="item.disabled?item.disabled:false"
                            :type="item.inputType"
                            :max="item.max"
                            :min="item.min"
                            :maxlength="item.maxlength"
                            :show-word-limit="item.showLimit?item.showLimit:false"
                            :prefix-icon="item.prefixIcon"
                            :suffix-icon="item.suffixIcon"
                        ></el-input>

                        <!-- 前面带下拉框的日期选择框 -->
                        <selectDate
                            v-if="item.type=='selectDate'"
                            :beforeList="formobj.leftList[item.key]"
                            :clearable="item.clearable?item.clearable:false"
                            :defaultValue="item.defaultValue"
                            :labelWidth="formobj.labelWidth?formobj.labelWidth+'px':'100px'"
                            @changeCommand="selectDateChange(formItem[item.selectkey]=$event,item,item.key)"
                            @dateChange='selectDateChange(formItem[item.key]=$event,item,item.key)'
                            >
                        </selectDate>

                        <!-- 单行输入框变文本框 -->
                        <bigInput 
                            v-if="item.type=='bigInput'"
                            :data="formItem[item.key]"
                            @backContentFn="formChange(formItem[item.key]=$event,item,item.key)"
                        ></bigInput>

                        <!-- 普通下拉框 -->
                        <el-select
                           v-if="item.type=='selectComp'"
                           v-model="formItem[item.key]"
                           :disabled='item.disabled?item.disabled:false' 
                           :placeholder="item.placeholder?item.placeholder:'请选择'"
                           :clearable="item.clearable===false?item.clearable:true"
                           :multiple='item.multiple?item.multiple:false'
                           :filterable="item.filterable===false?item.filterable:true"
                           :loading="item.loading?item.loading:false"
                           :filter-method='item.filterMethod'
                           :remote="item.remote?item.remote:false"
                           :remote-method="item.remoteMethod"
                           :allow-create="item.allowCreate?item.allowCreate:false"
                           style="width:100%"
                        >
                            <el-option
                                v-for="itemc in formobj.rightList[item.key]"
                                :key="itemc[item.optionsValue?item.optionsValue:'value']"
                                :label="itemc[item.optionsLabel?item.optionsLabel:'label']"
                                :value="itemc[item.optionsValue?item.optionsValue:'value']"
                                :disabled="itemc.disabled">
                            </el-option>
                        </el-select>

                        <!-- 带id和name下拉框 -->
                        <el-select
                           v-if="item.type=='selectIdComp'"
                           v-model="formItem[item.key]"
                           :disabled='item.disabled?item.disabled:false' 
                           :placeholder="item.placeholder?item.placeholder:'请选择'"
                           :clearable="item.clearable===false?item.clearable:true"
                           :multiple='item.multiple?item.multiple:false'
                           :filterable="item.filterable===false?item.filterable:true"
                           :loading="item.loading?item.loading:false"
                           :filter-method='item.filterMethod'
                           :remote="item.remote?item.remote:false"
                           :remote-method="item.remoteMethod"
                           :allow-create="item.allowCreate?item.allowCreate:false"
                           style="width:100%"
                        >
                            <el-option
                                v-for="itemc in formobj.rightList[item.key]"
                                :key="itemc[item.optionsValue?item.optionsValue:'value']"
                                :label="itemc[item.optionsLabel?item.optionsLabel:'label']"
                                :value="itemc[item.optionsValue?item.optionsValue:'value']"
                                :disabled="itemc.disabled">
                                <div style="display: flex;justifyContent: space-between;">
                                    <span>{{itemc[item.optionsLabel?item.optionsLabel:'label']}}</span>
                                    <span>{{itemc[item.optionsValue?item.optionsValue:'value']}}</span>
                                </div>
                            </el-option>
                        </el-select>

                        <!-- 前面带下拉框的下拉框 -->
                        <beforeSelect
                           v-if="item.type=='beforeSelect'"
                           :item='item'
                           :list="formobj.rightList[item.key]"
                           :labelWidth="formobj.labelWidth?formobj.labelWidth+'px':'100px'"
                           :beforeList="formobj.leftList[item.selectKey]"
                           @changeCommand='formChange(formItem[item.selectKey]=$event,item,item.key)'
                           @selectChange="formChange(formItem[item.key]=$event,item,item.key)"
                           :selectData='formobj.rightList'
                        >
                        </beforeSelect>
                        
                        <!-- 大数据下拉框--修改-- formItem[item.key]表示当前选中的value值-->
                        <bigDataSelect
                           v-if="item.type=='bigSelelct'"
                           :dateNum='item.dateNum'
                           :bigSelectList="formobj.rightList[item.key]"
                           :item='item'
                           @selectChange="formChange(formItem[item.key]=$event,item,item.key)"
                           @clear="clearSelect(item,item.key)"
                        >
                        </bigDataSelect>

                        <!-- 大数据联级框 目前仅适用二级联动  -->
                        <bigDataCascader
                            v-model="formItem[item.key]"
                            v-if="item.type=='bigDataCascader'"
                            :all-options="formobj.rightList[item.key]"
                            :loadSize="item.loadSize"
                            @handleChange="formChange(formItem[item.key]=$event,item,item.key)"
                        >
                        </bigDataCascader>
                   </el-col>
                </el-form-item>
            </el-col>
            <!-- 底部按钮组 -->
            <div class="bottomBtn">
                <div class="formBtn">
                    <el-button  type="primary" @click="onSubmit" size='mini'>查询</el-button>
                    <el-button  @click="reset" size='mini'>重置</el-button>
                </div>
                <div class="rightBtn">
                    <template v-for="item in formobj.bottomRightButton">
                        <!-- 按钮类型 -->
                        <el-button 
                            v-if="item.btnType=='button'"
                            :key="item.key"
                            :disabled='item.disabled?item.disabled:false'
                            :type='item.type'
                            :size="item.size?item.size:'mini'"
                            :icon="'el-icon-'+item.icon"
                            @click="formClick($event,item.key)"
                        >{{item.title}}</el-button>

                        <!-- popover类型 -->
                        <el-popover
                            :key="item.key"
                            v-if="item.btnType=='popover'"
                            :placement="item.placement?item.placement:'bottom'"
                            :title="item.contentTitle"
                            :width="item.width?item.width:'200'"
                            :trigger="item.trigger?item.trigger:'hover'"
                            :content="item.content">
                                <div v-if="item.popoverHtml" v-html="item.popoverHtml" style="width:100%;backgroud:rabg(255,255,255,1)"></div>
                                <el-button
                                    :key="item.key"
                                    slot="reference"
                                    :type="item.type?item.type:''"
                                    :size="item.size?item.size:'mini'"
                                    :icon="'el-icon-'+item.icon"
                                    @click="formClick($event,item.key)">
                                    {{item.title}}
                                </el-button>
                        </el-popover>
                    </template>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script>
import bigInput from './public/bigInput'
import selectDate from './public/selectDate.vue'
import bigDataSelect from './public/bigDataSelect.vue'
import beforeSelect from './public/beforeSelect.vue'
import bigDataCascader from './public/bigDateCascader.vue'
export default {
    components:{bigInput,selectDate,bigDataSelect,beforeSelect,bigDataCascader},
    props:{
        formobj: {
            type: Object,
            default: () => {return {}}
        }
    },
    watch:{
        formobj:{
            handler(val, newval) {
                this.setFormContent()
            },
            deep: true,
            //immediate:true,
        }
    },
    data(){
        return{
            formItem:{},
            labelWidth:100,
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.init();
        })
    },
    methods:{
        init(){
            //设置labelWidth的宽度
            this.setFormContent();
            //初始化formItem
            for(let item of this.formobj.formBtnArr){
                if(item.key && item.key!==''){
                    this.$set(this.$refs['form_'+this.formobj.id].model,item.key,null);
                }
            }
        },
        //查询
        onSubmit(){
            this.$emit("Search")
        },
        //重置
        reset(){
            this.$emit("Reset");
        },
        //设置输入框宽度 el-form-item__content
        setFormContent(){
            if(!this.formobj.labelWidth){
                this.labelWidth=100;
            }else{
                this.labelWidth=this.formobj.labelWidth
            }
            let fromRef=this.$refs[this.formobj.id];
            let formContent = fromRef.getElementsByClassName('el-form-item__content');
            let len = formContent.length;
            for(let i=0;i<len;i++){
                formContent[i].style.width = `calc(100% - ${this.labelWidth}px)`;
                if(formContent[i].parentNode.getAttribute('tag') == 'selectDate' || formContent[i].parentNode.getAttribute('tag') == 'beforeSelect'){
                //如果是带select的输入框或者带select的日期选择器，是不需要label的
                   formContent[i].style.width = `100%`;
                }
            }
        },
        //form表单控件改变
        formChange(event,item,key){
            this.$emit('formChange',event,item,key);
        },
        //
        selectDateChange(event,item,key){
            this.$emit('formChange',event,item,key);
        },
        //底部按钮集合
        formClick(e,key){
            this.$emit("formClick",e,key)
        },
        //清除下拉框
        clearSelect(item,key){
            this.$emit("clearSelect",item,key)
        },
    }
}
</script>
<style lang="less" scoped>
.formStyle{
    .optionsStyle{
        display: flex;
        justify-content: space-between;
    }
    .bottomBtn{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
}
</style>
<style lang="less">
.formStyle{
   .el-form--inline .el-form-item{
        margin-right: 0;
    }
    .bottomBtn{
        display: flex;
        justify-content: flex-start;
    }
    .el-range-editor--mini.el-input__inner {
        width: 100%;
    }

}

</style>